<%@page import="org.proddevplm.dao.data.activities.Activity"%>
<%@page import="org.proddevplm.dao.data.competitors.CompetitorsProduct"%>
<%@page import="org.proddevplm.dao.data.competitors.Competitors"%>
<%@page import="java.util.List"%>
<%@page import="org.proddevplm.dao.data.Product"%>
<%@page import="org.proddevplm.constants.ControllerConstants"%>
<%@page import="org.proddevplm.business.tools.constants.ToolsConstants" %>
<%@page import="org.proddevplm.business.activity.constants.ActivityConstants" %>
<script>

	$ (function(){
		$( "button" ).button();
		$("#allCAPage").hide();
		
		$("#caTableApprover").tablesorter({
			widgets: ['zebra'],
			headers:{
				0: {sorter: false}
			},
		})
		
		$("#caTable").tablesorter({
			widgets:['zebra'],
			headers:{
				0: {sorter: false}
			}
		})
	});
	
	$("#productConcept").keyup(function(event){
		  if(event.keyCode == 13){
		    $("#addConcept").click();
		  }
		});
	
	$("#productFamily").keyup(function(event){
		  if(event.keyCode == 13){
		    $("#addFamily").click();
		  }
		});
	
	$("#mainCompetitors").keyup(function(event){
		  if(event.keyCode == 13){
		    $("#addCompetitor").click();
		  }
		});
	
	$("#compProdName").keyup(function(event){
		  if(event.keyCode == 13){
		  	$("#addCPName").click();
		  }
		});
	
	$("#competitorSelect").keyup(function(event){
		  if(event.keyCode == 13){
		 	$("#selCompetitor").click();
		  }
		});
	
	$("#cpTechnChar").keyup(function(event){
		if(event.keyCode == 13){
			$("#addTechnChar").click();
		}
		});
	
	$(document).ready(function() {
		
		$("#caTable").hide();
		$("#competitorProduct").hide();
		
		$('.highlight').mouseover(function () {
		    $(this).css("color","black");
		 });

		$('.highlight').mouseout(function () {
		    $(this).css("color","#555555");	    
		 });
	});

	function addConcept(){
		var conceptAux = document.getElementById('productConcept').value;
		document.productInfo.concept.value = conceptAux;
		document.getElementById('productConcept').value = null;
	}
	
	function addFamily(){
		var familyAux = document.getElementById('productFamily').value;
		document.productInfo.family.value = familyAux;
		document.getElementById('productFamily').value = null;
	}
	
	function addCompetitor(){
		var competitor = document.getElementById('mainCompetitors').value;
		if (competitor != null && competitor!=""){
			document.productInfo.competitors.options[document.productInfo.competitors.options.length] = new Option(competitor);
			document.getElementById('mainCompetitors').value = null;
		}
	}
	
	function addCPName(){
		var nameAux = document.getElementById('compProdName').value;
		document.competitorProductInfo.cpName.value = nameAux;
		document.getElementById('compProdName').value = null;		
	}
	
	function selCompetitor(){
		var compAux = document.getElementById('competitorSelect').value;
		document.competitorProductInfo.productCompetitor.value = compAux;
	}
	
	function addTechnChar(){
		var charAux = document.getElementById('cpTechnChar').value;
		if (charAux != null && charAux != ""){
			document.competitorProductInfo.characteristics.options[document.competitorProductInfo.characteristics.options.length] = new Option(charAux);
			document.getElementById('cpTechnChar').value = null;
		}
	}
	
	
	function submitForm1(){
		
		var index = 0;
		var compAux = '';
		$("#competitors option").each(function() {
			if (index++>0) {
				compAux+='~';
				}
			compAux += $(this)[0].value;
		});
		
		var arguments = buildParameter("concept")+"&"+buildParameter("family")+"&competitorsList="+compAux; 
		ajaxCall("toolsManager","0",arguments,null);
	
	}
	
	function submitForm2(){
		
		var index = 0;
		var charAux = '';
		$("#characteristics option").each(function(){
			if(index++>0){
				charAux+='~';
			}
			charAux += $(this)[0].value;
		});
		
		var arguments = buildParameter("cpName")+"&"+buildParameter("productCompetitor")+"&characteristicsList="+charAux+"&"+buildParameter("activitySelect");
		ajaxCall("toolsManager","1", arguments, clearForm);
	
	}
	
	function clearForm(data){
		document.getElementById('cpName').value = null;
		document.getElementById('productCompetitor').value = null;
		$('#characteristics >option').remove();
	}
	
	function viewResults(){
		ajaxCall("dataAccessManager","0", null, null);
		$("#caTable").show();
	}
	
	function viewAddProdForm(){
		$("#competitorProduct").show();
	}
	
	function approveActivity(name){
		$("#activityName").val(name);
		document.forms['approveForm'].submit();
	}
	
	function finishActivity(name){
		$("#activityName").val(name);
		document.forms['finishActivityForm'].submit();
	}
	
	function rejectActivity(name){
		$("#activityName").val(name);
		$("#rejectDialog").dialog("open");
	}
	
	$( "#rejectDialog" ).dialog({
		autoOpen: false,
		height: 350,
		width: 350,
		modal: true,
		buttons: {
			"Propose change": function() {
				var name = document.getElementById("activityName").value;
				var arguments = "activityName="+name+"&"+buildParameter("changeSubject")+"&"+buildParameter("changeDetails");
				ajaxCall("toolsManager", "21", arguments, forward);
				$( this ).dialog( "close" );
				},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			$( this ).dialog( "close" );
		}
	});
	
	function forward(data){
		document.forms["rejectForm"].submit();
	}
	
</script>

<%
Product currentProduct = (Product)session.getAttribute("currentProduct"); 
List<Competitors> competitorsByProduct = (List)session.getAttribute("competitorsByProduct");
List<CompetitorsProduct> cpResults = (List)session.getAttribute("cpResults");
List<Activity> activitiesForUser = (List)session.getAttribute("activitiesForUser");
List<CompetitorsProduct> cpByActivityName = (List)session.getAttribute("cpByActivityName");
String activityName = "";

%>

<div class="pageTitle">
	<div style="text-align:left;">
		<a href="/proddev/controller?manager=dataAccessManager&method=21">
			<img src="/proddev/images/arrowleft.png" align="middle" height="20" width="30" style="border:0px"></a>
	</div>
	<p style="font-size:small; font-weight:bold; margin-top:-20px">Competitor's Analysis</p>

</div>

<div id="caPageDiv" align="center" >

	<%if(cpByActivityName==null ){%>
		<div style="margin:10 5 5;">
			<div style="float:left; text-align:left; font-weight:bold; color:#555555">
				Please choose the activity you want to complete
			</div>
			<select class="regInput" id="activitySelect" name="activitySelect" onchange="$('#allCAPage').show()"size="1" style="width:25%; float:left; margin-left:10px">
				<option SELECTED>-select activity-</option>
				<%if(activitiesForUser!=null){
					for(int i=0; i<activitiesForUser.size(); i++) {
						Activity activity = (Activity)activitiesForUser.get(i);%>
						<option value="<%=activity.getName()%>"><%=activity.getName() %></option>
					<%}
				}
				%>		
			</select>
			<div style="clear:both"></div>
		</div>
	<div id="allCAPage" style="margin-top:10px">
		<div class="containerSmall" id="inputDiv" style="width:48%; float:left">
			<div class="pageTitle" style="font-family: verdana; font-size: small; font-weight: bold; border-bottom: 2px solid #DBDBDB; padding:1%">
				<%if(currentProduct != null){%>
					<%=currentProduct.getName() %> input area
				<%}%>
			</div>
			
			<div style="margin-top:10px;">
				<div class="highlight" style="width: 30%; text-align:left; float: left; color:#555555">
					<b>Product concept: </b>
				</div>
				<input class="regInput" type="text" id="productConcept" name="productConcept" style="width:50%; height:28px; float:left; ">
				<button id="addConcept" name="addConcept" onclick="addConcept()" style="width:15%; height:28px; font-weight: bold; float:left; margin-left:3%">Set</button>
				<div style="clear:both;"></div>
			</div>
			
			
			<div style="margin-top:10px;">
				<div class="highlight" style="width: 30%; text-align:left; float: left;">
					<b>Product family: </b>
				</div>
				<input class="regInput" type="text" id="productFamily" name="productFamily" style="width:50%; height:28px; float:left;">
				<button id="addFamily" name="addFamily" onclick="addFamily()" style="width:15%; height:28px; font-weight: bold; float:left; margin-left:3%">Set</button>
				<div style="clear:both;"></div>
			</div>
			
			
			<div style="margin-top:10px;">
				<div class="highlight" style="width: 30%; text-align:left; float: left;">
					<b>Main Competitors: </b>
				</div>
				<input class="regInput" type="text" id="mainCompetitors" name="mainCompetitors" style="width:50%; height:28px; float:left; ">
				<button id="addCompetitor" name="addCompetitors" onclick="addCompetitor()" style="width:15%; height:28px; font-weight: bold; float:left; margin-left:3%">Add</button>
				<div style="clear:both;"></div>
			</div>
						
			<div style="margin:10px; ">
				<button id="infoCompDone" name="infoCompDone" onclick="submitForm1()" style="width:250px; font-weight:bold;">Done</button>
			</div>
			
		</div>
	
		<div class="containerSmall" id="outputDiv" style="width:48%; margin-left: 1%; float:left">
			<form name="productInfo" method="post" style="margin-bottom:0px">
				
				<div class="pageTitle" style="font-family: verdana; font-size: small; font-weight: bold; border-bottom: 2px solid #DBDBDB; padding:1%">
					<%if(currentProduct != null){%>
						<%=currentProduct.getName() %> output area
					<%}%>
				</div>
				
				<div style="margin-top:10px; ">
					<div class="highlight" style="width: 30%; text-align:left; float: left;">
						<b>Product concept: </b>
					</div>
					<%if(currentProduct.getConcept()!=null) {%>
						<textarea class="regInput" id="concept" name="concept" rows="1" style="width:65%; height:28px; float:left;"><%=currentProduct.getConcept() %></textarea>
						<%}
					else {%>
						<textarea class="regInput" id="concept" name="concept" rows="1" style="width:65%; height:28px; float:left;"></textarea>
						<%} %>
				</div>
				<div style="clear:both"></div>
				
				<div style="margin-top:10px;">
					<div class="highlight" style="width: 30%; text-align:left; float: left;">
						<b>Product family: </b>
					</div>
					<%if(currentProduct.getFamily()!=null) {%>
						<textarea class="regInput" id="family" name="family" rows="1" style="width:65%; height:28px; float:left;"><%=currentProduct.getFamily() %></textarea>
						<%}
					else {%>
						<textarea class="regInput" id="family" name="family" rows="1" style="width:65%; height:28px; float:left;"></textarea>
						<%} %>
				</div>
				<div style="clear:both"></div>
				
				<div style="margin-top:10px;">
					<div class="highlight" style="width: 30%; text-align:left; float: left;">
						<b>Main Competitors: </b>
					</div>
					<select class="regInput" name="competitors" id="competitors" style="width: 65%; float:left" size="4">
						<%if (competitorsByProduct!=null){
							for (Competitors c:competitorsByProduct) {%>
								<option value=""><%=c.getName() %></option>
								
							<%} 
							}%>				
					</select>
				</div>
				<div style="clear:both"></div>
			
			</form>
			<div style="clear:both"></div>
		</div>
		<div style="clear:both"></div>
		
		<button id="addCompProduct" name="addCompProduct" onclick="viewAddProdForm()" style="margin-top:10px; width:250px; font-weight:bold;">Add competitors' product</button>
		
		<div id="competitorProduct" align="center" style="margin-top: 10px; ">
			<div class="containerSmall" id="cpInputDiv" style="width:48%; float:left">
				<div style="margin:10px;">
					<div class="highlight" style="width: 30%; text-align:left; float: left;">
						<b>Product name: </b>
					</div>
					<input class="regInput" type="text" id="compProdName" name="compProdName" style="width:50%; height:28px; float:left; ">
					<button id="addCPName" name="addCPName" onclick="addCPName()" style="width:15%; height:28px; font-weight: bold; float:left; margin-left:3%">Set</button>
					<div style="clear:both"></div>
				</div>
				
				<div style="margin:10px;">
					<div class="highlight" style="width: 30%; text-align:left; float: left;">
						<b>Competitor: </b>
					</div>
					<select class="regInput" id="competitorSelect" name="competitorSelect" size="1" style="width:50%; height:28px; float:left; ">
						<%if (competitorsByProduct!=null){
								for (Competitors c:competitorsByProduct) {%>
									<option value="<%=c.getName() %>"><%=c.getName() %></option>
									
								<%} 
							}%>
					</select>
					<button id="selCompetitor" name="selCompetitor" onclick="selCompetitor()" style="width:15%; height:28px; font-weight: bold; float:left; margin-left:3%">Set</button>
					<div style="clear:both"></div>
				</div>
				
				<div style="margin:10px;">
					<div class="highlight" style="width: 30%; text-align:left; float: left;">
						<b>Technical Characteristic: </b>
					</div>
					<input class="regInput" type="text" id="cpTechnChar" name="cpTechnChar" style="width:50%; height:28px; float:left;">
					<button id="addTechnChar" name="addTechnChar" onclick="addTechnChar()" style="width:15%; height:28px; font-weight: bold; float:left; margin-left:3%">Add</button>
					<div style="clear:both"></div>
				</div>
							
				<div style="margin:10px;">
					<button id="infoDone" name="infoDone" onclick="submitForm2()" style="width:250px; font-weight:bold;">Done</button>
				</div>
				<div style="clear:both"></div>
			</div>
			
			<div class="containerSmall" id="cpOutputDiv" style="width:48%; margin-left: 1%; float:left">
				<form name="competitorProductInfo" method="post" style="margin-bottom:0px">
					<div style="margin-top:10px;">
						<div class="highlight" style="width: 30%; text-align:left; float: left;">
							<b>Product name: </b>
						</div>
						<textarea class="regInput" id="cpName" name="cpName" rows="1" style="width:65%; height:28px; float:left;"></textarea>
						<div style="clear:both"></div>
					</div>
					
				
					<div style="margin-top:10px; ">
						<div class="highlight" style="width: 30%; text-align:left; float: left;">
							<b>Competitor: </b>
						</div>
						<textarea class="regInput" id="productCompetitor" name="productCompetitor" rows="1" style="width:65%; height:28px; float:left;"></textarea>
						<div style="clear:both"></div>
					</div>
				
					<div style="margin-top:10px;">
						<div class="highlight" style="width: 30%; text-align:left; float: left;">
							<b>Technical Characteristics: </b>
						</div>
						<select class="regInput" name="characteristics" id="characteristics" style="width: 65%; margin-bottom:0.5%;float:left" size="4">
							
						</select>
					</div>
					<div style="clear:both"></div>
					
				</form>
			
			</div>
			
			<div style="clear:both"></div>
		</div>
		<div style="clear:both"></div>
		
		<button id="viewResults" name="viewResults" onclick="viewResults()" style="width:250px; margin:20px; font-weight:bold;">View results</button>
		
		<table class="tablesorter" id="caTable" rules="rows" frame="hsides" bordercolor="#DBDBDB" style="width:100%;">
			<thead>
				<tr>
					<th style="width:5%">Crt. No</th>
					<th style="width:20%">Name of product</th>
					<th style="width:20%">Competitor</th>
					<th style="width:55%">Technical Characteristics</th>
				</tr>
			</thead>
			
			<tbody>
				<%if(cpResults != null){
					for(int i=0; i<cpResults.size(); i++) {
						CompetitorsProduct cp = cpResults.get(i);
						activityName = cp.getActivityName();%>
						<tr style="height:20px">
							<td style="text-align:center;"><%=i+1 %></td>
							<td><%=cp.getCompetitorProduct() %></td>
							<td><%=cp.getCompetitor() %></td>
							<td>
								<%String aux = cp.getTechnicalCharacteristics();
								String[] auxArray = aux.split("~");
								for(int j=0; j<auxArray.length; j++){%>
									<%=auxArray[j]+"</br>"%><%} %></td>
						</tr>
						<%}
					} %>
			</tbody>
		
		</table>
		
		<button id="finishActivity" name="finishActivity" onclick="finishActivity('<%=activityName %>')" style="width:250px; margin:20px; font-weight:bold;">Finish activity</button>
		<form name="finishActivityForm" method="post" action="/proddev/controller">
			<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.ACTIVITY_MANAGER%>"/>
			<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=ActivityConstants.CHANGE_STATUS%>"/>
			<input type="hidden" name="activityName" id="activityName">	
		</form>
		<div style="clear:both"></div>
	</div>
	<%}else{ %>
		<table id="caTableApprover" class="tablesorter" style="width:100%; font-size:small" cellpadding="0" cellspacing="0" border="1" rules="rows" frame="hsides" bordercolor="#DBDBDB">
		<thead>
			<tr style="background-color:#F0F0F6">
				<th style="width:5%">Crt. No</th>
				<th style="width:20%">Name of product</th>
				<th style="width:20%">Competitor</th>
				<th style="width:55%">Technical Characteristics</th>
			</tr>
		</thead>
		
		<tbody>
			<%if(cpResults != null){
				for(int i=0; i<cpResults.size(); i++) {
					CompetitorsProduct cp = cpResults.get(i);
					activityName = cp.getActivityName();%>
					<tr style="height:20px">
						<td style="text-align:center;"><%=i+1 %></td>
						<td><%=cp.getCompetitorProduct() %></td>
						<td><%=cp.getCompetitor() %></td>
						<td>
							<%String aux = cp.getTechnicalCharacteristics();
							String[] auxArray = aux.split("~");
							for(int j=0; j<auxArray.length; j++){%>
								<%=auxArray[j]+"</br>"%><%} %></td>
					</tr>
					<%}
				} %>
		</tbody>
	
	</table>
	
	<div style="margin-top:10px; width:100%">
		<button id="rejectActivity" name="rejectActivity" onclick="rejectActivity('<%=activityName%>')" style="width:150px; font-weight: bold; float:left">Reject activity</button>
		<button id="approveActivity" name="approveActivity" onclick="approveActivity('<%=activityName%>')" style="width:150px; font-weight: bold; float:right">Approve activity</button>
		<div style="clear:both"></div>
	</div>
	
	<div id="rejectDialog" title="Propose changes" style="display:none">
		<jsp:include page="/pages/content/project/devTools/workspace/changes/changeReport.jsp"></jsp:include>
	</div>
	
	<form name="rejectForm" method="post" action="/proddev/controller">
		<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.TOOLS_MANAGER%>"/>
		<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=ToolsConstants.STAKEHOLDERS_FWD%>"/>
	</form>
	<form name="approveForm" method="post" action="/proddev/controller">
		<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.ACTIVITY_MANAGER%>"/>
		<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=ActivityConstants.UPDATE_ACTIVITY%>"/>
		<input type="hidden" name="activityName" id="activityName">
	</form>
	<%} %>
</div>